<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<link href="/css/font-awesome.css" rel="stylesheet">
		<link href="/css/datatables.min.css" rel="stylesheet">
		<link href="/css/animate.css" rel="stylesheet">
		<link href="/css/style.css" rel="stylesheet">
		<script src="/js/jquery-3.1.1.min.js"></script>
		<script src="/js/bootstrap.min.js"></script>
		<script src="/js/vue.js"></script>
	</head>
	<body style="background-color:whitesmoke">
	<div id="atten">
		<div class="row wrapper border-bottom white-bg page-heading">
			<div class="col-lg-10">
				<h2>考勤管理</h2>
				<ol class="breadcrumb">
					<li>
						<a href="index.html">主页</a>
					</li>
					<li>
						<a>考勤</a>
					</li>
					<li class="active">
						<strong>考勤记录</strong>
					</li>
				</ol>
			</div>
		</div>

		<div class="wrapper wrapper-content animated fadeInRight">

			<div class="ibox-content m-b-sm border-bottom">
				<div class="row">

						<div class="form-group">
							<label class=" col-sm-2 control-label">员工编号</label>
							<div class=" col-sm-2">
								<input type="text" class="form-control" v-model="attenQuery.staffId" placeholder="请输入员工编号">
							</div>
							<label class=" col-sm-2 control-label">姓名</label>
							<div class=" col-sm-2">
								<input type="text" class="form-control" v-model="attenQuery.userName" placeholder="请输入姓名">
							</div>
							<div>
								<button class="btn btn-primary btn-sm" @click="loadData()"><span
										class="glyphicon glyphicon-zoom-in"></span>查询</button>
								<button class="btn btn-primary btn-sm" type="button" @click="add()"><span
										class="glyphicon glyphicon-plus"></span> 新增</button>
							</div>
						</div>


				</div>

			</div>
			<div class="row">
				<div class="col-lg-12">

					<div class="ibox float-e-margins">

						<div class="ibox-content">

							<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
								<thead>
									<tr>

										<th >员工编号</th>
										<th >员工名称</th>
										<th >类型</th>
										<th >奖惩金额</th>
										<th >考勤人</th>
										<th >考勤时间</th>


										<th class="text-right" data-sort-ignore="true">操作</th>

									</tr>
								</thead>
								<tbody>
									<tr v-for="x in list">
										<td>
											{{x.staffId}}
										</td>
										<td>
											{{x.userName}}
										</td>
										<td>
											{{x.attenType}}
										</td>
										<td>
											{{x.attenReward}}
										</td>
										<td>
											{{x.attenPersonl}}
										</td>
										<td>
											{{x.attenTime}}
										</td>
										<td class="text-right">
<!--											<button class="btn-primary btn btn-sm" onclick="add()"><span class="glyphicon glyphicon-tag"></span> 编辑</button>-->
											<button class="btn-primary btn btn-sm" @click="del(x)"><span
													class="glyphicon glyphicon-trash"></span> 删除</button>
										</td>
									</tr>
								</tbody>
							</table>
							<div>
								一共{{total}}条数据,一共{{totalPage}}页,当前第{{curPage}}页
								<button class="btn btn-success btn-sm" type="button" @click="indexPage()">首页</button>
								<button class="btn btn-success btn-sm" type="button" @click="prePages()">上一页</button>
								<button class="btn btn-success btn-sm" type="button" @click="nextPages()">下一页</button>
								<button class="btn btn-success btn-sm" type="button" @click="endPage()">尾页</button>
								跳转到<input type="number" id="num" style="width: 40px" min="1" max="10" v-model="selectPage" @keyup="valNum">页
								<button class="btn btn-success btn-sm" type="button" @click="changePage()">跳转</button>
								<select v-model="attenQuery.row" @change="selectRow" >
									<option value="3">每页3条</option>
									<option value="5">每页5条</option>
									<option value="10">每页10条</option>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 模态框开始 -->
		<div id="one" class="modal fade" style="top:200px">
			<div class="modal-dialog">

				<div class="modal-content">
					<!--头部-->
					<div class="modal-header">
						<h2 align="center">考勤新增</h2>
					</div>
					<!--主题内容-->
					<div class="modal-body">
						<form role="form" class="form-horizontal">
							<div class="form-group">
								<label class=" col-sm-2 control-label">员工编号</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="attenQuery.staffId" placeholder="请输入员工编号">
								</div>
							</div>
							<div class="form-group">
								<label class=" col-sm-2 control-label">员工姓名</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="attenQuery.userName" placeholder="请输入员工姓名">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2  control-label">类型</label>
								<div class=" col-sm-10">
									<select class="form-control" v-model="atten.attenType">
										<option>迟到</option>
										<option>旷工</option>
										<option>请假</option>
										<option>加班</option>
										<option>出差</option>
										<option>调班</option>
										<option>停工</option>
									</select>
								</div>
							</div>
							<div class="form-group">
							<label class=" col-sm-2 control-label">考勤人</label>
							<div class=" col-sm-10">
								<input type="text" class="form-control" v-model="atten.attenPersonl" placeholder="请输入考勤人">
							</div>
						</div>
							<div class="form-group">
								<label class=" col-sm-2 control-label">考勤时间</label>
								<div class=" col-sm-10">
									<input type="text" class="form-control" v-model="atten.attenTime"
										   placeholder="请输入考勤时间">
								</div>
							</div>
						</form>
					</div>

					<!--底部-->
					<div class="modal-footer">
						<button class="btn btn-primary btn-sm" type="button" @click="closeWin()"><span
								class="glyphicon glyphicon-remove"></span>关闭</button>
						<button class="btn btn-primary btn-sm" @click="saveAdmin"><span class="glyphicon glyphicon-save"></span>保存
						</button>
					</div>

				</div>
			</div>
		</div>

		</div>
	</body>

	<script>
		//显示模态框
		function add() {
			$("#one").modal("show")
		}
		//关闭模态框
		function closeWin() {
			$("#one").modal("hide")
		}

		new Vue({
			el:"#atten",
			data:{
				list:[],
				total:0,//总条数
				totalPage:0,//总页数
				selectPage:1,//选择页数
				attenQuery:{ //查询对象
					page:1,
					row:3,
					staffId:"",
					userName:""
				},
				prePage:0,//上一页
				nextPage:0,//下一页.
				curPage:0,//当前页
				atten:{
					staffId:"",
					userName:"",
					attenType:"",
					attenPersonl:"",
					attenTime:""
				},
				title:"考勤修改"



			},
			methods:{
				loadData:function () {
					var self = this;
					$.ajax({
						url:"/attenManage/List",//请求地址
						type:"get",
						data:self.attenQuery,
						dataType:"json",//返回的数据类型
						success:function (data) {
							console.log(data);
							self.list = data.list;
							self.total = data.total;
							self.totalPage = data.totalPage;
							self.prePage = data.prePage;
							self.nextPage = data.nextPage;
							self.curPage = data.curPage;


						}

					})
				},
				prePages:function () {//上一页
					this.attenQuery.page = this.prePage;
					//刷新
					this.loadData();

				},
				nextPages:function () {
					this.attenQuery.page = this.nextPage;
					//刷新
					this.loadData();

				},
				indexPage:function () {//首页
					this.attenQuery.page = 1
					//刷新
					this.loadData();

				},
				endPage:function () {//尾页
					this.attenQuery.page = this.totalPage;
					//刷新
					this.loadData();

				},
				changePage:function () {//跳转
					if(this.selectPage>this.totalPage){
						this.attenQuery.page = this.totalPage;
					}else{
						this.attenQuery.page = this.selectPage;
					}
					//刷新
					this.loadData();

				},
				selectRow:function () {//选择条数
					this.attenQuery.page=1
					//刷新
					this.loadData();

				},
				valNum:function () {
					//定义正则表达式对象
					var dd =/^[\u4e00-\u9fa5]{0,}$/
					//如果输入的汉字，就显示1
					if(dd.test(this.selectPage)) {
						this.selectPage=1
					}else{
						console.log("=="+this.selectPage)
						//如果输入的值大于总页数，就回到最大值
						if(this.selectPage>this.totalPage){
							this.selectPage = this.totalPage;
						}
					}


				},
				update:function(x) {//打开修改模态框
					$("#one").modal("show")
					//数据回显
					this.atten = x;

					this.title="考勤修改";

				},
				add :function () {//打开新增模态框
					$("#one").modal("show")
					this.title="考勤新增";
					//清空
					this.atten.staffId="";
					this.atten.userName="";
					this.atten.attenType="";
					this.atten.attenPersonl="";
					this.atten.attenTime="";
				}, del: function (obj) {

					var attenId = obj.attenId;
					var self = this;

					$.ajax({
						url:"/attenManage/del",
						type:"post",
						contentType:"application/x-www-form-urlencoded",
						data: {"id":attenId},
						dataType:"json",
						success:function (data) {
							console.log(data);
							alert(data.info);
							if(data.info==="保存成功"){
								//刷新
								self.loadData();
							}
						}
					})

				},
				saveAdmin:function () {//保存
					var url="";
					if(this.title==="考勤修改"){
						url="/attenManage/update";
					}else{
						url="/attenManage/add";
					}
					var self = this;
					console.log(url);
					$.ajax({
						url:url,
						type:"post",
						contentType:"application/x-www-form-urlencoded",
						data:self.atten,
						dataType:"json",
						success:function (data) {
							console.log(data);
							alert(data.info);
							if(data.info==="保存成功"){
								//关闭模态框
								$("#one").modal("hide")
								//刷新
								self.loadData();
							}
						}


					})

				},
				closeWin:function () {//关闭模态框
					$("#one").modal("hide")
				}


			},
			mounted(){
				//运行loadData函数
				this.loadData();
			}
		})
	</script>
</html>
